<template>
  <div>
    <el-form ref="formData" :model="formData" label-width="80px" :rules="formRules">
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio label="0">目录</el-radio>
          <el-radio label="1">菜单</el-radio>
          <el-radio label="2">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="formData.type === '0' ? '目录名称' : formData.type === '1' ? '菜单名称' : '按钮名称'" prop="name">
        <el-input v-model="formData.name" :placeholder="formData.type === '0' ? '目录名称' : formData.type === '1' ? '菜单名称' : '按钮名称'" />
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentId">
        <el-input v-model="formData.parentName" disabled />
      </el-form-item>
      <el-form-item v-if="formData.type !== '0'" label="权限标识" prop="permission">
        <el-input v-model="formData.permission" placeholder="如：sys:user:add,sys:user:delete,sys:user:update" />
      </el-form-item>
      <el-form-item v-if="formData.type === '1'" label="菜单路由" prop="url">
        <el-row>
          <el-col :span="22">
            <el-input v-model="formData.url" />
          </el-col>
          <el-col :span="2">
            <el-tooltip content="提示" placement="right" effect="light" style="padding-left: 20px;">
              <div slot="content">
                <p>URL格式：</p>
                <p>1.常规业务开发的功能URL，如用户管理，views目录下页面路径为 /sys/user, 此处填写 /sys/user。</p>
                <p>2.嵌套外部网页，如通过菜单打开百度网页，此处填写 http://www.baidu.com，http:// 不可省略。</p>
                <p>示例：用户管理：/sys/user 嵌套百度：http://www.baidu.com 嵌套网页：http://127.0.0.1:8000</p>
              </div>
              <i class="el-icon-warning" />
            </el-tooltip>
          </el-col>
        </el-row>

      </el-form-item>
      <el-form-item v-if="formData.type !== '2'" label="排序编号" prop="sort">
        <el-input v-model="formData.sort" type="number" />
      </el-form-item>
      <el-form-item v-if="formData.type !== '2'" label="菜单图标" prop="icon">
        <el-input v-model="formData.icon" placeholder="菜单图标名称（如：el-icon-setting）" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="formData.remarks" type="textarea" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    formId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formData: {
        id: '',
        type: '',
        name: '',
        parentId: '',
        parentName: '',
        permission: '',
        url: '',
        icon: '',
        sort: '',
        remarks: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入菜单名称' }
        ],
        type: [
          { required: true, message: '请选择菜单类型' }
        ]
      }
    }
  },
  mounted() {
    this.getFormData()
  },
  methods: {
    getFormData() {
      if (this.formId) {
        this.$api.menu.find(this.formId).then(res => {
          this.formData = res.data
        })
      }
    },
    getParentMenu(parentId) {
      this.$api.menu.find(parentId).then(res => {
        this.formData.parentId = res.data.id
        this.formData.parentName = res.data.name
      })
    },
    submitForm() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          if (!this.formData.id) {
            this.$api.menu.save(this.formData).then(res => {
              this.dialogVisible = false
              this.$emit('submitSuccess')
            })
          } else {
            this.$api.menu.update(this.formData).then(res => {
              this.dialogVisible = false
              this.$emit('submitSuccess')
            })
          }
        }
      })
    },
    handleCloseDialog() {
      Object.assign(this.formData, this.$options.data().formData)
    }
  }
}

</script>
<style scoped>
</style>
